<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        button {
            display: block;
            width: 300px;
            height: 50px;
            border: 0;
            background: #29B6F6;
            border-radius: 5px;
            margin: 50px auto;
            font-size: 16px;
            color: white;
        }
    </style>
</head>

<body>
    <button type="button" id="btn">点击</button>
    <script>
        /***
         * 防抖与节流一般出现在那些场景下使用
         * 1、点击事件，防止高频的点击按钮，多次的触发执行业务处理逻辑
         * 2、滚动条事件，同样的也是防止高频触发处理逻辑
         *
         * 防抖：当电梯门快要关闭的时候，这个时候有人进入电梯，电梯程序会重新计算电梯门关闭的时间。
         * 节流：露水积累到一定的重量的时候，才会掉下来。
         * **/
        let btn = document.getElementById("btn");
        //节流
        function throttle(func, wait, option) {
            let lastTime = 0, timeOut;
            return function () {
                let now = Date.now();
                if (!lastTime && !option.isOnce) {
                    lastTime = now;
                }
                //当前时间减去上次点击的时间
                let ranceing = wait - (now - lastTime);
                //在wait以外的时间，执行为第一次或者大于wait的时间才执行
                if (ranceing <= 0) {
                    func.apply(this, arguments);
                    lastTime = now;
                    if (timeOut) {
                        clearTimeout(timeOut);
                        timeOut = null;
                    }
                } else if (!timeOut) {
                    //相当于电梯有人进来了,这个时间还没有到达wait的时间
                    timeOut = setTimeout(() => {
                        func.apply(this, arguments);
                        lastTime = option.isOnce ? now : 0;
                    }, ranceing);
                }
            }
        }

        function logger() {
            console.log("logger");
        }
        //防抖
        function debounce(func, wait, immediate) {
            let timeOut = 0;
            return function () {
                if(immediate){

                }
                timeOut = setTimeout(() => {
                    func.apply(this, arguments);
                    clearTimeout(timeOut);
                }, wait);
            }
        }
        // 节流
        // btn.addEventListener("click", throttle(logger, 1000, { isOnce: false }));
        //防抖
        btn.addEventListener("click", debounce(logger, 1000, true));

    </script>

</body>

</html>